<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>使用WebGL绘制一个点</title>
</head>

<body>
  <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
  <canvas id="webgl" width="500" height="500" style="background-color:#0d72da"></canvas>

</body>
<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">
  //attribute声明vec4类型变量apos
  attribute vec4 apos;
  void main() {
    //顶点坐标apos赋值给内置变量gl_Position
    //逐顶点处理数据
    gl_Position = apos;
  }

</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">

  void main() {
    // 逐片元处理数据，所有片元(像素)设置为红色
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }

</script>

<script>
  //通过getElementById()方法获取canvas画布
  var canvas = document.getElementById('webgl');
  //通过方法getContext()获取WebGL上下文
  var gl = canvas.getContext('webgl');

  //顶点着色器源码
  var vertexShaderSource = document.getElementById('vertexShader').innerText;

  //片元着色器源码
  var fragShaderSource = document.getElementById('fragmentShader').innerText;

  //初始化着色器
  var program = initShader(gl, vertexShaderSource, fragShaderSource);
  //获取顶点着色器的位置变量apos，即aposLocation指向apos变量。
  var aposLocation = gl.getAttribLocation(program, 'apos');

  //类型数组构造函数Float32Array创建顶点数组
  var data = new Float32Array([0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5]);

  //创建缓冲区对象
  var buffer = gl.createBuffer();
  //绑定缓冲区对象,激活buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  //顶点数组data数据传入缓冲区
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  //缓冲区中的数据按照一定的规律传递给位置变量apos
  gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);
  //允许数据传递
  gl.enableVertexAttribArray(aposLocation);

  //开始绘制图形
  gl.drawArrays(gl.LINE_LOOP, 0, 4);

  //声明初始化着色器函数
  function initShader(gl, vertexShaderSource, fragmentShaderSource) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
  }
</script>

</html>